<template>
	<view v-if="shenheStatus == 0" class="md-page" style="padding-top: 12rpx;">
		<!-- 搜索栏 -->
		<view class="header-search df">
			<view class=""  @click="goDetails">
				<u-icon name="arrow-left" size="43rpx"></u-icon>
			</view>
			<view class="ml20" style="width: 450rpx;">
				<u-search bg-color="#fff" placeholder="搜索更多地址" :show-action="false" v-model="searchVal"
					@search="gotoSearchMd"></u-search>
			</view>
		</view>
		<!-- 定位 -->
		<!-- 	<view class="current-md-address">
			<view class="current-md-address-let">
				<image :src="asyncImgs.admin.addr" mode="widthFix"></image>
				<view class="address" v-if="address || mdData.address">{{
          address || mdData.address
        }}</view>
				<view class="address warning" v-else>请重新定位以便重新获取门店</view>
			</view>
			<view class="again-action" @click="location">
				<i class="iconfont icon-exchangerate"></i>
				<text>{{ $t("mdAdmin.location") }}</text>
			</view>
		</view> -->

		<view class="md-page-box" style="margin-top: 200rpx;">
			<!-- <shopInfo @callBack="clearInit"></shopInfo> -->

			<!-- v-if="mdList.length && (mdData.name || storeMd.name)" -->
			<!-- <view v-if="mdList.length && mdData.name" :class="['store-md']" @click="selectStore">
				<i class="iconfont icon-xuanzekuangmoren"></i>
				不选择门店
			</view>
			<view v-else :class="['store-md', 'on']" @click="selectStore">
				<i class="iconfont icon-success-fill"></i>
				不选择门店
			</view> -->

			<!-- v-if="mdList.length && (mdData.name || storeMd.name)" -->
			<view class="current-md" v-if="mdList.length && mdData.name">
				<view class="nowAddress">
					当前自提点
				</view>
				<!-- <image class="active" :src="asyncImgs.admin.md_now_title" mode="widthFix">
				</image> -->
				<!-- 已选门店：{{ mdData.name || storeMd.name }} -->
				<view class="list-section">
					<view :class="['md-item']" :key="index" @click="selectMdToStorage(item)">
						<view class="md-img">
							<image :src="mdData.cover_url" mode="aspectFill"> </image>
							<!-- <view class="shop-status">{{
                isOpen(item) ? "营业中" : "已打烊"
              }}</view> -->
						</view>
						<view class="md-info">
							<view class="info-box">
								<view class="md-name">{{ mdData.name || storeMd.name }}</view>
								<view class="md-address">
									<text class="detail">{{
                    mdData.province_name +
                    " " +
                    mdData.city_name +
                    " " +
                    mdData.district_name +
                    " " +
                    mdData.address
                  }}</text>
								</view>
								<view class="shop-time" v-if="mdData.start_time">
									<text>{{ $t("shop.startTime") }}：</text>
									<text>{{
                    mdData.shop_time_type == 0
                      ? "全天"
                      : mdData.start_time + "~" + mdData.end_time
                  }}</text>
								</view>
								<view class="shop-detail">
									<text class="distance">{{ $t("shop.distance") }}{{ mdData.distance }}</text>
									<!-- 导航 -->
									<!-- <view class="shop-icons">
										<view class="icon-box" @click.stop="guideToShop(mdData)">
											<i class="iconfont icon-map-filling1"></i>
										</view>
										<view class="icon-box" @click.stop="phoneToShop(mdData.mobile)">
											<i class="iconfont icon-phone"></i>
										</view>
									</view> -->
									<!-- 新增选择按钮 -->
									<view class="selectBtn">
										选这个
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="md-list" v-if="mdList.length">
				<view class=""
					style="display: flex; justify-content:space-between; align-items: center;color: black; padding: 20rpx 0rpx;">
					<view style="font-weight: 600; font-size: 30rpx;">附近自提点</view>
					<view class="">
						<u-icon name="map" color="#2E2E2E" size="28"></u-icon> {{newAddress}}
						<text @click="goNewMap" style="margin-left: 25rpx;">切换位置
						</text>
						<u-icon name="arrow-right" color="#2E2E2E" size="28"></u-icon>
					</view>
				</view>

				<view class="list-section">
					<view :class="[isOpen(item) ? '' : 'shop-close', 'md-item']" v-for="(item, index) in mdList"
						:key="index" @click="selectMdToStorage(item)">
						<view class="md-img">
							<image :src="item.cover_url" mode="aspectFill"> </image>
							<view class="shop-status" v-if="!isOpen(item)">{{
                isOpen(item) ? "营业中" : "已打烊"
              }}</view>
						</view>
						<view class="md-info">
							<view class="info-box active">
								<view class="md-name">{{ item.name }}</view>
								<view class="md-address">
									<text class="detail">{{
                    item.province_name +
                    " " +
                    item.city_name +
                    " " +
                    item.district_name +
                    " " +
                    item.address
                  }}</text>
								</view>
								<!-- shop_time_type: "0" 全天  1： 取时间段 -->
								<view class="shop-time" v-if="item.start_time">
									<text>{{ $t("shop.startTime") }}：</text>
									<text>{{
                    item.shop_time_type == 0
                      ? "全天"
                      : item.start_time + "~" + item.end_time
                  }}</text>
								</view>
								<!--                 
                <view class="shop-status">{{
                  isOpen(item) ? "营业中" : "已打样"
                }}</view> -->
                                <!-- 导航 -->
								<view class="shop-detail">
									<text class="distance">{{ $t("shop.distance") }}{{ item.distance }}</text>
									<!-- <view class="shop-icons">
										<view class="icon-box" @click.stop="guideToShop(item)">
											<i class="iconfont icon-map-filling1"></i>
										</view>
										<view class="icon-box" @click.stop="phoneToShop(item.mobile)">
											<i class="iconfont icon-phone"></i>
										</view>
									</view> -->
									<!-- 新增选择按钮 -->
									<view class="selectBtn">
										选这个
									</view>
									
								</view>
							
							</view>
						</view>
					</view>
					<!-- <view style="padding-top: 4.8vw">
            <u-loadmore
              :status="status"
              :icon-type="iconType"
              :load-text="loadText"
            />
          </view> -->
				</view>
			</view>
		</view>
		<!-- 全局过渡组件 -->
		<transitionPage></transitionPage>
	</view>
	<Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
	import Shenhe from "@/components/shenhe/shenhe";
	// import shopInfo from "./components/shopInfo.vue";
	import goodsCart from "@/api/goodscart.js";

	export default {
		components: {
			Shenhe,
			// shopInfo
		},
		data() {
			return {
				mdData: {},
				searchVal: "",
				page: 1,
				pageSize: 20,
				row_count: 0,
				longitude: 0,
				latitude: 0,
				address: "",
				mdList: [],
				backUrl: "",
				storeMd: {},
				loadText: {
					loadmore: "轻轻上拉",
					loading: "努力加载中",
					nomore: "没有更多了~"
				},
				status: "nomore",
				newAddress: '',
			};
		},
		computed: {},
		onLoad(option) {
			if (option.url) {
				this.backUrl = option.url;
			}
			setTimeout(() => {
				this.initData();
			}, 0);
			let mdLocalData = uni.getStorageSync("storeMdData");
			if (mdLocalData) {
				let mdData = JSON.parse(mdLocalData);
				this.mdData = mdData;
				this.address = mdData.address;
			} else {
				this.address = this.stores.address || "";
			}
			this.storeMd = {
				id: 0,
				name: this.stores.name,
				mobile: this.stores.mobile,
				cover_url: this.stores.web_log,
				pic_url: this.stores.store_share_logo, // logo
				shop_time: this.stores.shop_time || "",
				address: this.stores.address || "",
				city_name: this.stores.city_name || "",
				district_name: this.stores.district_name || "",
				province_name: this.stores.province_name || "",
				latitude: this.stores.latitude || "",
				longitude: this.stores.longitude || "",
				distance: this.stores.distance || ""
			};
		},
		onShow() {},
		onReachBottom() {
			if (this.page * this.pageSize >= this.row_count) return;
			this.page++;
			let params = {
				loadMore: true,
				page: this.page
			};
			if (this.searchVal) {
				params["keyword"] = this.searchVal;
			}
			if (this.longitude) {
				params["longitude"] = this.longitude;
			}
			if (this.latitude) {
				params["latitude"] = this.latitude;
			}
			this.getMdList(params);
		},
		methods: {
			// 返回商品详情
			goDetails(){
				uni.navigateBack()
			},
			// 去切换位置页面
			goNewMap() {
				uni.navigateTo({
					// url:`/shop/newMap/newMap?id=${this.newAddress}`,
					url: `/shop/newMap/newMap`,
				})
			},
			clearInit(item) {
				this.page = 1;
				this.mdList = [];
				this.$nextTick(() => {
					this.mdData = item;
				});

				this.getLocationInfo();
				this.getMdList({
					page: this.page,
					longitude: this.longitude,
					latitude: this.latitude
				});
			},
			async initData() {
				const res = await this.$store.dispatch("getLocation");
				if (res) {
					let {
						longitude,
						latitude
					} = res;
					this.longitude = longitude;
					this.latitude = latitude;
				}
				this.getLocationInfo();
				this.getMdList({
					page: this.page,
					longitude: this.longitude,
					latitude: this.latitude
				});
			},
			//   点击搜索，搜索门店
			gotoSearchMd() {
				this.page = 1;
				this.getMdList({
					page: this.page,
					keyword: this.searchVal
				});
			},
			// 获取门店列表
			getMdList(params) {
				uni.showLoading({
					title: this.$t("home.loading")
				});
				this.$allrequest.shop.getMdList(params).then((res) => {
					uni.hideLoading();
					if (!res.code) {
						if (res.data.list.length) {
							res.data.list.forEach((el) => {
								let [latitude, longitude] = el.coordinate.split(",");
								el.latitude = latitude;
								el.longitude = longitude;
							});
						}

						if (params.loadMore) {
							this.mdList = [...this.mdList, ...res.data.list];
						} else {
							this.mdList = res.data.list;
						}
						if (params.readAddress && res.data.list.length) {
							this.address =
								res.data.list[0].province_name +
								res.data.list[0].city_name +
								res.data.list[0].district_name +
								res.data.list[0].address;
						}
						if (!params.readAddress && !res.data.list.length) {
							let mdLocalData = uni.getStorageSync("storeMdData");
							if (mdLocalData) {
								let mdData = JSON.parse(mdLocalData);
								this.address = mdData.address;
							}
						}
						this.row_count = res.data.row_count;

						if (this.mdList.length >= parseInt(this.row_count)) {
							this.status = "nomore";
						}
					}
				});
			},
			// 定位
			async location() {
				const apiRes = await this.$store.dispatch("getLocation");
				if (apiRes.longitude) {
					uni.chooseLocation({
						success: (res) => {
							if (res.errMsg == "chooseLocation:ok") {
								this.longitude = res.longitude;
								this.latitude = res.latitude;
								this.address = res.address;
								this.newAddress = res.name
								this.page = 1;
								this.getMdList({
									page: this.page,
									longitude: this.longitude,
									latitude: this.latitude
								});
							}
						},
						fail: (err) => {
							if (err && (err.errno === 112 || err.errno === 104)) {
								uni.showToast({
									title: "未同意隐私协议，该功能不可使用！",
									duration: 2000,
									icon: "none"
								});
							}
						}
					});
				}
			},

			// 选中门店
			selectMdToStorage(item) {
				try {
					if (!this.isOpen(item)) {
						uni.showToast({
							title: "该店铺已打烊！",
							duration: 2000,
							icon: "none"
						});
						return;
					}

					uni.setStorageSync("storeMdData", JSON.stringify(item));
					uni.setStorageSync("MdDataReload", "true");
					goodsCart.getCartList();
					let mdBackUrl = uni.getStorageSync("mdBackUrl");
					if (mdBackUrl) {
						uni.reLaunch({
							url: mdBackUrl
						});
						return;
					}

					if (!this.backUrl) {
						// 新加回退到商品详情
						uni.navigateBack()
						// uni.switchTab({
						// 	url: "/pages/home/home"
						// });
					} else {
						let {
							backUrl
						} = this;

						if (backUrl === "/alipay-order/orderMeal/orderMeal") {
							backUrl += `?md_id=${item.id}`;
						}

						uni.reLaunch({
							url: backUrl
						});
					}
				} catch (error) {
					this.$utils.goBack();
				}
			},

			// 拨打商家电话
			phoneToShop(num) {
				this.$utils.makePhoneCall(num);
			},
			// 导航到店
			guideToShop(item) {
				if (!item.latitude) return;
				uni.openLocation({
					latitude: parseFloat(item.latitude),
					longitude: parseFloat(item.longitude)
				});
			},
			// 门店是否营业
			isOpen(item) {
				if (item.open_status == 0) return false;
				if (item.shop_time_type == 0) return true;
				if (!item.start_time) return true;
				let date = new Date();
				let hour = date.getHours();
				let minutes = date.getMinutes();
				let [startBefore, startAfter] = item.start_time.split(":");
				let [endBefore, endAfter] = item.end_time.split(":");
				if (hour >= startBefore && hour < endBefore) {
					return true;
				}
				return false;
			},
			selectStore() {
				this.storageMd = "";
				this.mdData.id = 0;
				uni.removeStorageSync("storeMdData");
				uni.setStorageSync("MdDataReload", "true");
				goodsCart.getCartList();
				setTimeout(() => {
					let mdBackUrl = uni.getStorageSync("mdBackUrl");
					if (mdBackUrl) {
						uni.reLaunch({
							url: mdBackUrl
						});
						return;
					}
					if (!this.backUrl) {
						uni.switchTab({
							url: "/pages/home/home"
						});
					} else {
						uni.reLaunch({
							url: this.backUrl
						});
					}
				}, 300);
			},
			getLocationInfo() {
				this.$allrequest.diyNew
					.getLocationInfo({
						longitude: this.longitude,
						latitude: this.latitude
					})
					.then((res) => {
						this.newAddress = res.data.district +
							res.data.street;
						if (!res.code) {
							this.address =
								res.data.province +
								res.data.city +
								res.data.district +
								res.data.street;
						}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.ml20{
		margin-left: 20rpx;
	}
	.df{
		display: flex;
		align-items: center;
	}
	.active{
		border-bottom: 1px solid #F8F8F8;
		padding-bottom: 20rpx;
	}
	.nowAddress{
		width: 150rpx;
		height: 42rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 30rpx;
		color: rgba(29,29,29,0.94);
		font-style: normal;
		text-transform: none;
		padding: 24rpx 0rpx;
		margin-bottom: 24rpx;
	}
	.selectBtn{
		width: 136rpx;
		height: 54rpx;
		line-height: 54rpx;
		text-align: center;
		background: #F0250E;
		border-radius: 120rpx 120rpx 120rpx 120rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #FFFFFF;
		font-style: normal;
		text-transform: none;
	}
	.md-page {
		position: relative;
		min-height: 100vh;
		background: #f2f2f2;

		.header-search {
			position: fixed;
			top: 95rpx;
			padding: 0rpx 24rpx;
			z-index: 999;
		}

		.current-md {
			position: relative;
			padding: 0 24rpx;
			margin-bottom: 24rpx;
			margin-top: 10rpx;
			background: #fff;
			
			border-radius: 20rpx;

			// .active {
			// 	position: absolute;
			// 	right: -4rpx;
			// 	top: -4rpx;
			// 	width: 174rpx;
			// }
		}

		.current-title {
			width: 100%;
			height: 90rpx;
			padding-left: 24rpx;
			display: flex;
			align-items: center;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: rgba(29, 29, 29, 0.94);
			background: #f2f2f2;
		}

		.current-md-address {
			padding: 0 24rpx;
			// width: 100%;
			height: 76rpx;
			background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 100%);
			display: flex;
			justify-content: space-between;
			align-items: center;

			.address {
				max-width: 486rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(29, 29, 29, 0.94);
			}

			.again-action {
				display: flex;
				justify-content: flex-end;
				align-items: center;

				.iconfont {
					color: #f0250e;
					font-size: 34rpx;
					margin-right: 1vw;
				}

				text {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #f0250e;
				}
			}
		}

		.md-list {
			padding: 0 24rpx;
			background: #fff;
			border-radius: 20rpx;
		}
	}

	.list-section {
		width: 100%;

		// padding-bottom: 4.8vw;
		.md-item {
			width: 100%;
			display: flex;
			align-items: flex-start;
			padding: 24rpx 0;
			position: relative;

			&:after {
				content: "";
				position: absolute;
				left: 156rpx;
				bottom: 0;
				right: 0;
				height: 2rpx;
				background: #f8f8f8;
			}

			&:lasf-of-type:after {
				display: none;
			}

			.md-img {
				position: relative;
				width: 144rpx;
				height: 144rpx;
				border-radius: 10rpx;
				background: #ffffff;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
					display: block;
				}
			}

			.shop-status {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 0px 0px 10rpx 10rpx;
				background: rgba(38, 38, 38, 0.5);
				font-size: 24rpx;
				color: #ffffff;
			}

			.md-info {
				flex: 1;
				margin-left: 18rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.info-box {
					flex: 1;

					.md-name {
						font-size: 26rpx;
						font-weight: 400;
						color: #262626;
						max-width: 432rpx;
						word-break: break-all;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						/* 这里是超出几行省略 */
						overflow: hidden;
					}

					.md-address {
						padding: 4rpx 0 10rpx;

						.detail {
							font-size: 24rpx;
							color: #8c8c8c;
							word-break: break-all;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							/* 这里是超出几行省略 */
							overflow: hidden;
							color: #8c8c8c;
							line-height: 30rpx;
						}
					}

					.shop-time {
						font-size: 24rpx;
						color: #262626;
					}
				}

				.shop-detail {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.distance {
						font-size: 24rpx;
						color: #f0250e;
					}

					.shop-icons {
						display: flex;
						align-items: center;
						justify-content: center;

						.icon-box {
							width: 48rpx;
							height: 48rpx;
							background: #fbeceb;
							border-radius: 50%;
							display: flex;
							align-items: center;
							justify-content: center;

							.iconfont {
								color: #f0250e;
							}
						}

						.icon-box:nth-child(2) {
							margin-left: 20rpx;
						}
					}
				}
			}
		}

		.shop-close {
			.md-info {
				.info-box {
					.md-name {
						color: #bfbfbf;
					}

					.md-address {
						.detail {
							color: #bfbfbf;
						}
					}

					.shop-time {
						color: #bfbfbf;
					}

					.shop-status {
						background: #eeeeee;
						color: #8c8c8c;
					}
				}
			}
		}
	}

	.store-md {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;
		padding: 0 24rpx;
		height: 102rpx;
		background: #fff;
		border-radius: 20rpx;
		font-size: 30rpx;
		position: relative;

		.md-img {
			width: 50rpx;
			height: 50rpx;
			border-radius: 8rpx;
			background: #ffffff;
			overflow: hidden;
			border: 1px solid #f7f7f7;

			image {
				width: 100%;
				height: 100%;
				display: block;
			}
		}

		.md-info {
			flex: 1;
			margin-left: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.info-box {
				flex: 1;

				.md-name {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #262626;
					max-width: 432rpx;
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					/* 这里是超出几行省略 */
					overflow: hidden;
				}

				.md-address {
					margin-top: 4rpx;
					max-width: 432rpx;
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					/* 这里是超出几行省略 */
					overflow: hidden;

					.detail {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #8c8c8c;
					}
				}

				.shop-time {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #8c8c8c;
					margin-top: 8rpx;
				}

				.shop-status {
					margin-top: 8rpx;
					width: 80rpx;
					height: 32rpx;
					background: #f0250e;
					border-radius: 4rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #ffffff;
				}
			}

			.shop-detail {
				width: 196rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				

				.distance {
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #8c8c8c;
					margin-bottom: 32rpx;
				}

				.shop-icons {
					display: flex;
					align-items: center;
					justify-content: center;

					.icon-box {
						width: 48rpx;
						height: 48rpx;
						background: #fbeceb;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;

						.iconfont {
							color: #f0250e;
						}
					}

					.icon-box:nth-child(2) {
						margin-left: 20rpx;
					}
				}
			}
		}
	}

	.warning {
		color: #f0250e !important;
	}

	.icon-success-fill {
		margin: 0rpx 10rpx 0 0;
		font-size: 40rpx;
	}

	.store-md.on {
		color: #f0250e;
	}



	.current-md-address-let {
		display: flex;
		align-items: center;
		flex: 1;
		overflow: hidden;

		image {
			margin-right: 10rpx;
			width: 28rpx;
		}

		.address {
			flex: 1;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}

	.md-page-box {
		padding: 0 24rpx 200rpx;
	}
</style>